<!DOCTYPE html>
<html lang="en">
<head>
    <title>房源情况统计</title>
    <meta charset="utf-8">
    <link href="/plugins/echarts/common.css" rel="stylesheet"/>
    <link rel="stylesheet" href="/layui/css/layui.css" media="all">
    <link rel="stylesheet" href="/style/admin.css" media="all">
    <link rel="stylesheet" href="/style/jmdf.css" media="all">
<#setting number_format="#.##">
</head>
<body>
<!--顶部-->
<header class="header left">
    <div class="left nav">
        <ul>
            <li>&nbsp;</li>
        </ul>
    </div>
    <div class="header_center left" style="position:relative;font-weight: bold;font-size: 36px;">
        房源情况统计
    </div>
    <div style="text-align: center">
        <span class="header_center" id="now" style="font-size: 26px;"></span><br/>
        <span class="header_center" id="nowHour" style="font-size: 26px;"></span>
    </div>
</header>
<div class="con left">
    <div class="div_any">
        <div class="left div_any01" style="width:35%;">
            <div class="div_any_child" style="width:98%;height: 900px;">
                <div class="div_any_title" style="font-size: 25px;">湖滨花园(东区)房源情况(套)</div>
                <div id="buildChart2" style="height: 900px;"></div>
            </div>
        </div>
        <div class="left div_any01" style="width:20%;">
            <div class="div_any_child" style="width:98%;height: 900px;">
                <div class="div_any_title" style="font-size: 25px;">地块三房源情况(套)</div>
                <div id="buildChart3" style="height: 900px;"></div>
            </div>
        </div>
        <div class="left div_any01" style="width:45%;">
            <div class="div_any_child" style="width:98%;height: 900px;">
                <div class="div_any_title" style="font-size: 25px;">辅选区房源情况(套)</div>
                <div id="buildChart4" style="height: 900px;"></div>
            </div>
        </div>
    </div>
</div>
<script src="/layui/layui.js" charset="utf-8"></script>
<script src="/plugins/jquery/jquery.min.js"></script>
<script src="/plugins/echarts/echarts.min.js"></script>
<script>
    layui.config({
        base: '/modules/' //静态资源所在路径
    }).use(['jquery'], function () {
        var $ = layui.jquery;


        var buildChart2 = null;
        var buildChart3 = null;
        var buildChart4 = null;
        var build_json_choose = [];//已选
        var build_json_noChoose = [];//未选
        var chooseText = "已选";
        var noChooseText = "未选";
        var buildColor = ["#87cefa", "#F57474"];

        function initGroup() {
            //柱状图2 湖滨花园东区
            buildChart2 = echarts.init(document.getElementById('buildChart2'));
            var optionChart2 = {
                color: [buildColor[0], buildColor[1]],
                grid: { //方位设置
                    left: '5%',
                    right: '5%',
                    bottom: '5%',
                    containLabel: true
                },
                legend: { //说明设置
                    data: [
                        {name: chooseText, textStyle: {color: buildColor[0]}}
                        , {name: noChooseText, textStyle: {color: buildColor[1]}}
                    ],
                    top: '5%',
                    left: '30px'
                },
                tooltip: {
                    trigger: 'item'
//                    ,formatter: "{a}<br/>{b}<br/>{c}人"
                },
                xAxis: [
                    {
                        type: 'category',
                        data: [],
                        axisLine: {
                            lineStyle: {
                                color: '#5bc0de'
                            }
                        },
                        axisLabel: {//柱状图下文字设置
                            interval: 0,
                            rotate: 0,
                            textStyle: {
                                color: '#fff',
                                fontSize: "12"
                            },
                            formatter: '{value}'
                        }
                    }
                ],
                yAxis: [
                    {
                        type: 'value',
                        axisLine: {
                            lineStyle: {
                                color: '#5bc0de'
                            }
                        },
                        splitLine: {
                            show: false
                        },
                        axisLabel: {
                            textStyle: {
                                color: '#fff'
                            },
                            formatter: function (value) {
                                return value + "";
                            }
                        }
                    }
                ],
                series: [
                    {
                        name: chooseText,
                        type: 'bar',
                        barWidth: 30,
                        stack: '总量',
                        zlevel: 1,
                        label: {
                            show: true,
                            position: 'inside',
                            fontSize: '20',
                            color: '#ffffff',
                            formatter: function (data) {
                                var i = data.dataIndex;//坐标
                                var v = data.value;//数值
                                if (v == 0) {
                                    return "";
                                }
                                return build_json_choose[i];
                            }
                        },
                        data: build_json_choose
                    },
                    {
                        name: noChooseText,
                        type: 'bar',
                        barWidth: 30,
                        stack: '总量',
                        label: {
                            normal: {
                                show: true,
                                position: 'top',
                                fontSize: '20',
                                color: '#ffffff',
                                formatter: function (data) {
                                    var i = data.dataIndex;//坐标
                                    //var v = data.value;//数值
                                    var total = build_json_choose[i] + build_json_noChoose[i];
                                    if (total > 0) {
                                        return total;
                                    } else {
                                        return "";
                                    }
                                }
                            }
                        },

                        data: build_json_noChoose
                    }
                ]
            };
            buildChart2.setOption(optionChart2);

            //柱状图3  二期地块三
            buildChart3 = echarts.init(document.getElementById('buildChart3'));
            var optionChart3 = {
                color: [buildColor[0], buildColor[1]],
                grid: { //方位设置
                    left: '5%',
                    right: '5%',
                    bottom: '5%',
                    containLabel: true
                },
                legend: { //说明设置
                    data: [
                        {name: chooseText, textStyle: {color: buildColor[0]}}
                        , {name: noChooseText, textStyle: {color: buildColor[1]}}
                    ],
                    top: '5%',
                    left: '30px'
                },
                tooltip: {
                    trigger: 'item'
//                    ,formatter: "{a}<br/>{b}<br/>{c}人"
                },
                xAxis: [
                    {
                        type: 'category',
                        data: [],
                        axisLine: {
                            lineStyle: {
                                color: '#5bc0de'
                            }
                        },
                        axisLabel: {//柱状图下文字设置
                            interval: 0,
                            rotate: 0,
                            textStyle: {
                                color: '#fff',
                                fontSize: "12"
                            },
                            formatter: '{value}'
                        }
                    }
                ],
                yAxis: [
                    {
                        type: 'value',
                        axisLine: {
                            lineStyle: {
                                color: '#5bc0de'
                            }
                        },
                        splitLine: {
                            show: false
                        },
                        axisLabel: {
                            textStyle: {
                                color: '#fff'
                            },
                            formatter: function (value) {
                                return value + "";
                            }
                        }
                    }
                ],
                series: [
                    {
                        name: chooseText,
                        type: 'bar',
                        barWidth: 30,
                        stack: '总量',
                        zlevel: 1,
                        label: {
                            show: true,
                            position: 'inside',
                            fontSize: '20',
                            color: '#ffffff',
                            formatter: function (data) {
                                var i = data.dataIndex;//坐标
                                var v = data.value;//数值
                                if (v == 0) {
                                    return "";
                                }
                                return build_json_choose[i];
                            }
                        },
                        data: build_json_choose
                    },
                    {
                        name: noChooseText,
                        type: 'bar',
                        barWidth: 30,
                        stack: '总量',
                        label: {
                            normal: {
                                show: true,
                                position: 'top',
                                fontSize: '20',
                                color: '#ffffff',
                                formatter: function (data) {
                                    var i = data.dataIndex;//坐标
                                    //var v = data.value;//数值
                                    var total = build_json_choose[i] + build_json_noChoose[i];
                                    if (total > 0) {
                                        return total;
                                    } else {
                                        return "";
                                    }
                                }
                            }
                        },

                        data: build_json_noChoose
                    }
                ]
            };
            buildChart3.setOption(optionChart3);
            //柱状图4  东区结余区
            buildChart4 = echarts.init(document.getElementById('buildChart4'));
            var optionChart4 = {
                color: [buildColor[0], buildColor[1]],
                grid: { //方位设置
                    left: '5%',
                    right: '5%',
                    bottom: '5%',
                    containLabel: true
                },
                legend: { //说明设置
                    data: [
                        {name: chooseText, textStyle: {color: buildColor[0]}}
                        , {name: noChooseText, textStyle: {color: buildColor[1]}}
                    ],
                    top: '5%',
                    left: '30px'
                },
                tooltip: {
                    trigger: 'item'
//                    ,formatter: "{a}<br/>{b}<br/>{c}人"
                },
                xAxis: [
                    {
                        type: 'category',
                        data: [],
                        axisLine: {
                            lineStyle: {
                                color: '#5bc0de'
                            }
                        },
                        axisLabel: {//柱状图下文字设置
                            interval: 0,
                            rotate: 0,
                            textStyle: {
                                color: '#fff',
                                fontSize: "12"
                            },
                            formatter: '{value}'
                        }
                    }
                ],
                yAxis: [
                    {
                        type: 'value',
                        axisLine: {
                            lineStyle: {
                                color: '#5bc0de'
                            }
                        },
                        splitLine: {
                            show: false
                        },
                        axisLabel: {
                            textStyle: {
                                color: '#fff'
                            },
                            formatter: function (value) {
                                return value + "";
                            }
                        }
                    }
                ],
                series: [
                    {
                        name: chooseText,
                        type: 'bar',
                        barWidth: 30,
                        stack: '总量',
                        zlevel: 1,
                        label: {
                            show: true,
                            position: 'inside',
                            fontSize: '20',
                            color: '#ffffff',
                            formatter: function (data) {
                                var i = data.dataIndex;//坐标
                                var v = data.value;//数值
                                if (v == 0) {
                                    return "";
                                }
                                return build_json_choose[i];
                            }
                        },
                        data: build_json_choose
                    },
                    {
                        name: noChooseText,
                        type: 'bar',
                        barWidth: 30,
                        stack: '总量',
                        label: {
                            normal: {
                                show: true,
                                position: 'top',
                                fontSize: '20',
                                color: '#ffffff',
                                formatter: function (data) {
                                    var i = data.dataIndex;//坐标
                                    //var v = data.value;//数值
                                    var total = build_json_choose[i] + build_json_noChoose[i];
                                    if (total > 0) {
                                        return total;
                                    } else {
                                        return "";
                                    }
                                }
                            }
                        },

                        data: build_json_noChoose
                    }
                ]
            };
            buildChart4.setOption(optionChart4);
        }
        //东区柱状图
        function getBuildData2() {
            var objChart = buildChart2.getOption();
            $.ajax({
                url: "/show/getBuildChooseHouseInfForBs?zsProjectIdStr=146&azProjectIdStr=20",
                type: "get",
                dataType: "json",
                success: function (data) {
                    //签约柱状图
                    objChart.xAxis[0].data = data.build;
                    build_json_choose = data.chooseCount;
                    build_json_noChoose = data.noChooseCount;
                    objChart.series[0].data = build_json_choose;
                    objChart.series[1].data = build_json_noChoose;
                    buildChart2.setOption(objChart);
                }
            });
        }
        //二期地块三柱状图
        function getBuildData3() {
            var objChart = buildChart3.getOption();
            $.ajax({
                url: "/show/getBuildChooseHouseInfForBs?zsProjectIdStr=146&azProjectIdStr=21",
                type: "get",
                dataType: "json",
                success: function (data) {
                    //签约柱状图
                    objChart.xAxis[0].data = data.build;
                    build_json_choose = data.chooseCount;
                    build_json_noChoose = data.noChooseCount;
                    objChart.series[0].data = build_json_choose;
                    objChart.series[1].data = build_json_noChoose;
                    buildChart3.setOption(objChart);
                }
            });
        }
        //东区结余区柱状图
        function getBuildData4() {
            var objChart = buildChart4.getOption();
            $.ajax({
                url: "/show/getBuildChooseHouseInfForBs?zsProjectIdStr=146&azProjectIdStr=4,19,20,21&houseStyle=辅选区房源",
                type: "get",
                dataType: "json",
                success: function (data) {
                    //签约柱状图
                    objChart.xAxis[0].data = data.build;
                    build_json_choose = data.chooseCount;
                    build_json_noChoose = data.noChooseCount;
                    objChart.series[0].data = build_json_choose;
                    objChart.series[1].data = build_json_noChoose;
                    buildChart4.setOption(objChart);
                }
            });
        }
        $(function () {
            initGroup();
            getBuildData2();
            getBuildData3();
            getBuildData4();
            setInterval(getBuildData2, 30000);
            setInterval(getBuildData3, 30000);
            setInterval(getBuildData4, 30000);
        });
    });
</script>
</body>
</html>
